<template>
	<div class="bottomFrame" v-if='flag'>
        <div @click.stop='hideFrame' class='frame-wrapper' >
			<div class='frame' @click.stop=''>
				<div class='content'>
					<div class='bottomFrame-top mg-R30 pd-B30'>
						<image class="bottomFrame-top-image" :src="imageSrc"></image>
						<div class=' bottomFrame-top-detail mg-B10'>
                    <div class=' bottomFrame-top-inner'><div>
                   <div class='bottomFrame-top-price' v-if="response[0].type !=2">
                    <div style="display: flex;flex-direction: row;justify-content: flex-start">
                      <div style="display: flex;flex-direction: row;align-items: center;margin-left: 5px">
                        <div class="activity_four">
                          <div class="activety_left">
                            <!--                    <text class="activity_left_title" v-if="item.type == '100'">VIP</text>-->
                            <text class="activity_left_title">{{vipPriceName}}</text>
                          </div>
                          <div class="activity_right">
                            <!--                          {{item.price | price}}-->
                            <text class="activity_right_title">¥{{vipPrice | price}}</text>
                          </div>
                        </div>
                      </div>
                    </div>
                   </div>
									<div class="mg-T10" style="display: flex;flex-direction: row;align-items: flex-end;margin-left: 4px" v-if="point>0&&response[0].type ==2">
										<text style="padding-left: 10px;font-size: 24px">兑换券:</text>
										<text class='bottomFrame-top-Inventory' style="color: orange">{{point  | number}}</text>
									</div>

									<div class="mg-T10" style="display: flex;flex-direction: row;align-items: flex-end;margin-left: 4px" v-if="response[0].type !=2">
										<text style="padding-left: 10px;font-size: 24px">惠民价:</text>
										<text class='bottomFrame-top-price-text'>￥{{price| price}}</text>
									</div>

									<div class="mg-T10" style="display: flex;flex-direction: row;align-items: flex-end;margin-left: 4px">
										<text style="padding-left: 10px;font-size: 24px">库存量:</text>
										<text class='bottomFrame-top-Inventory'>{{stock}}件</text>
									</div>
                                </div>
                                <div class="bottomFrame-icon-close" @click='hideFrame'>
                                    <icon style="width:70px;height:70px;color:#A1A1A1;" fontSize="60" content="ios-close-circle-outline"></icon>
                                </div>
                            </div>
						</div>
					</div>
					<list>
						<cell>
							<div class="bottomFrame-num-control flex">
								<text class="bottomFrame-num-control-text">商品数量</text>
								<div class="flex">
									<div class="mg-R20" v-if="minLimit>1?true:false"><text class="bottomFrame-num-control-limit">{{minLimit}}件起售</text></div>
									<div class="mg-R20" v-if="maxLimit>0?true:false"><text class="bottomFrame-num-control-limit">限购{{maxLimit}}件</text></div>
									<div class="shoppingCart-productList-control">
										<div class="shoppingCart-productList-reduce" @click="numReduce(currentNum)">
                                            <icon style="width: 60px; height:60px; " content="md-remove"></icon>
                                        </div>
										<input class="shoppingCart-productList-num" @blur="bindblur" @focus="bindfocus" v-model="currentNum" type="number" ref="input"/>
										<div class="shoppingCart-productList-add" @click="numAdd(currentNum)">
                                            <icon style="width: 60px; height:60px; " content="md-add"></icon>
                                        </div>
									</div>
								</div>
							</div>
						</cell>
						<cell>
							<div v-for="(attributeListItem,index) in attributeList" :key="index" class="bottomFrame-attribute">
								<div><text class="bottomFrame-attribute-name">{{attributeListItem.attrname}}</text></div>
								<div class="bottomFrame-attribute-item flex">
									<div v-for="(tagListItem, index) in attributeListItem.tagList" :key="index">
										<div class="bottomFrame-attribute-tag" :class="[tagListItem.isSelected==true?'attr-r':'', tagListItem.canSelected==true?'':'attr-lose']"
										 @click="selectAttr(attributeListItem.attrname, tagListItem.tagname, tagListItem.canSelected, tagListItem.isSelected)">
                                            <image class="bottomFrame-attribute-tag-image" :src="tagListItem.src" v-if="tagListItem.haveImage"></image>
											<div class="flex"><text class="bottomFrame-attribute-tag-text" :class="[tagListItem.isSelected==true?'attr-text-r':'']">{{tagListItem.tagname}}</text></div>
										</div>
									</div>
								</div>
							</div>
						</cell>
					</list>
				</div>
				<div v-if="!productState || stockSum==0" class="bottomFrame-bottom">
					<div class="btn bottomFrame-button-only botton_Bg_Color nostockSum" v-if="!productState">
						<text class="botton_Fz_Color bottomFrame-button-text" >商品已下架</text></div>
					 <div class="btn bottomFrame-button-only botton_Bg_Color nostockSum" v-if="productState && stockSum==0">
						 <text class="botton_Fz_Color bottomFrame-button-text">缺货中</text></div>
				</div>
				<div v-else>
				<div v-if="showConfirm && productState" class="bottomFrame-bottom">
					<div class="btn bottomFrame-button-only botton_Bg_Color" :class="[stockSum>0?'':'nostockSum']"
					 @click="submit"><text class="botton_Fz_Color bottomFrame-button-text">{{stockSum>0?'确定':'缺货中'}}</text></div>
				</div>
				<div v-if="!showConfirm && productState" class="bottomFrame-bottom">
					<div class="btn bottomFrame-button botton_Bg_Color botton_Fz_Color" :class="[stockSum>0?'':'nostockSum']"
					 @click="addCartSubmit"><text class="botton_Fz_Color bottomFrame-button-text">{{stockSum>0?'加入购物车':'缺货中'}}</text></div>
					<div class="btn bottomFrame-button botton_Bg_Color botton_Fz_Color" :class="[stockSum>0?'':'nostockSum']"
					 @click="buySubmit"><text class="botton_Fz_Color bottomFrame-button-text">{{stockSum>0?'立即购买':'缺货中'}}</text></div>
				</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		list,
		find
	} from '@/api/product'

	import {
		add,
		buyNow
	} from '@/api/cart'

	// const util = require('../../utils/util.js')
	const eeui = app.requireModule('eeui');
	export default {
		data() {
			return {
                bfInputCurrentNum:"",//input的当前值
				productId: "", //已选中的商品id
				showConfirm: "", //控制底部按键
				type: "", //判断是不是购物车页面的属性点击进来的
				isClose: "", //控制是关闭弹窗还是跳转订单确认页面
                flag: false,
                wrap:'wrap',
                wrapAnimate: 'wrapAnimate',
                frameWrapper:'frame-wrapper',
				bgOpacity: 0,
				frameAnimate: 'frameAnimate',
				spec1Off: false, //第一属性的开关
				spec2Off: false, //第一属性的开关
				imageSrc: "",
				imageSrcOrl: "",
				price: "", //商品单价
				pricePeriod: "", //价格区间
				stock: "", //库存
				stockSum: 0, //总库存
				minLimit: 1, //最小限购数量
				maxLimit: 0, //最大限购数量
				tagTextList: "", //显示所选的标签列表
				selectProduct: "", //被选中的商品
				currentNum: 1, //被选中的商品数量
				coupons: [], //优惠券
				promotions: [], //活动
				// spec1: "请选择配色分类", //第一属性
				// spec2: "请选择颜色", //第二属性
				//商品的属性列表
				attributeList: [],
				//测试的服务端数据
				tagControlList: [], //测试属性的控制列表
				origionalTagControlList: [],
				response: [],
				originalNum:"",//记录input原来值
				inputFocusOff:false, //
				productState: true, //商品上下架状态
        vipPrice:'',
        point:'',
        productType:''
			}
		},
		mounted() {
			// this.getOrderCount()
		},
		methods: {
			//请求商品数据
			productInfoRequest(id) {
				console.info("商品id" + id)
				find(id).then(
					res => {
            console.info("单件商品数据--" + JSON.stringify(res))
						if (res.type == 'success') {
							if (!res.data.products[0].isMarketable) {
								this.productState = false
							}
							//暂时没有库存，做数据补充
							// if (res.data.products.length > 0) {
							//         res.data.products.map((item) => {
							//                 item.stock = 5
							//         })
							// }
							//暂时没有库存，做数据补充
							this.response = res.data.products
              this.point = res.data.products[0].point
              this.vipPrice = res.data.products[0].vipPrice
              this.formateResponse(res.data.products)
							this.flag = true
							this.wrapAnimate = 'wrapAnimate'
							this.frameAnimate = 'frameAnimate'
							// wx.hideLoading()
						}
					}
				).catch(error => {
					console.info(error)
					// wx.hideLoading()
					eeui.toast({
						message: "服务器开小差，请重试",
						//gravity: "middle"
					});
				})
			},

			//显示底部弹窗
			showFrame(id, type) {
				console.info("显示底部弹窗id--" + id)
				console.info("显示底部弹窗type--" + type)
				this.productId = id
				this.productInfoRequest(id)
				if (type == "buyNow") { //立即购买过来的
					//console.info("立即购买过来的")
					this.showConfirm = true
					this.isClose = false
				} else if (type == "addCart" || type == "changeAttr") { //点击加入购物车过来的
					//console.info("点击加入购物车过来的")
					this.type = type
					this.showConfirm = true
					this.isClose = true
				} else if (type == "attribute") { //点击属性选择过来的
                    //console.info("点击属性选择过来的")
                    this.type= "addCart"
					this.showConfirm = false
				}
				//console.info("showConfirm--" + this.showConfirm)
			},

			//隐藏底部弹窗
			hideFrame() {
				this.wrapAnimate = 'wrapAnimateOut'
				this.frameAnimate = 'frameAnimateOut'
				setTimeout(() => {
					this.flag = false
				}, 400)
			},

			//属性标签的选择事件
			selectAttr(attrName, tagName, canselected, isselected) {
				let attrname = attrName
				let tagname = tagName
				let canSelected = canselected
                let isSelected = isselected
				if (canSelected) {
					this.control(attrname, tagname, canSelected, isSelected)
				}
			},

			//控制函数
			control(attrname, tagname, canSelected, isSelected) {
				let tagControlList = this.tagControlList
				console.info("tagControlList" + JSON.stringify(tagControlList))
				let response = this.response
				console.info("response" + JSON.stringify(response))
				let zeroStockList = [] //零库存列表
				let haveStockList = [] //非零库存列表
				// if (canSelected) {
				if (response.length > 0) {
					response.map((item) => {
						if (tagname == item.spec1 || tagname == item.spec2) {
							//console.info("item" + JSON.stringify(item))
							if (item.stock > 0) {
								if (attrname == "规格") {
									haveStockList.push(item.spec2)
								} else {
									haveStockList.push(item.spec1)
								}
							}
						}
					})
				}
				if (tagControlList.length > 0) {
					if (attrname == "规格") {
						haveStockList.map((item) => {
							tagControlList.map((item1) => {
								if (item1.attrname == "颜色") {
									if (item1.tagname != item) {
										zeroStockList.push(item1.tagname)
									}
								}
							})
						})
					} else {
						haveStockList.map((item) => {
							tagControlList.map((item1) => {
								if (item1.attrname == "规格") {
									if (item1.tagname != item) {
										zeroStockList.push(item1.tagname)
									}
								}
							})
						})
					}
				}
				//console.info("zeroStockList--" + JSON.stringify(zeroStockList))
				//console.info("haveStockList--" + JSON.stringify(haveStockList))
				let origionalTagControlList = this.origionalTagControlList
				if (tagControlList.length > 0) {
					tagControlList.map((item) => {
						if (isSelected) {
							if (item.tagname == tagname) {
								item.isSelected = false
							}
							if (item.attrname != attrname) {
								if (origionalTagControlList.length > 0) {
									origionalTagControlList.map((origionalTagControlListItem) => {
										if (item.tagname == origionalTagControlListItem.tagname) {
											item.canSelected = origionalTagControlListItem.canSelected
										}
									})
								}

							}
						} else {
							if (item.attrname == attrname) {
								item.isSelected = false
							} else {
								if (zeroStockList.length > 0) {
									zeroStockList.map((zeroStockListItem) => {
										if (zeroStockListItem == item.tagname) {
											item.canSelected = false
										}
									})
								}
								if (haveStockList.length > 0) {
									haveStockList.map((haveStockListItem) => {
										if (haveStockListItem == item.tagname) {
											item.canSelected = true
										}
									})
								}
							}
							if (item.tagname == tagname) {
								item.isSelected = true
							}

						}

					})
				}

				// }

				// let tagControlList = this.tagControlList
				let attributeList = this.attributeList
				console.info("attributeList--" + JSON.stringify(attributeList))
				let spec1 = ""
				let spec2 = ""

				if (tagControlList.length > 0) {
					tagControlList.map((item) => {
						if (attributeList.length > 0) {
							attributeList.map((item1) => {
								if (item.attrname == item1.attrname) {
									if (item1.tagList.length > 0) {
										item1.tagList.map((item2) => {
											if (item.tagname == item2.tagname) {
												item2.isSelected = item.isSelected
												item2.canSelected = item.canSelected
											}
										})
									}
								}
								if (item.isSelected == true) {
									if (item.attrname == "规格") {
										spec1 = item.tagname
									} else {
										spec2 = item.tagname
									}
								}
							})
						}
					})
				}
				// //console.info("spec1.length--" + spec1)
				// //console.info("spec2.length--" + spec2)
				let selectProduct = ""
                let tagTextList = this.tagTextList
                    if (response.length > 0) {
					if (attributeList.length == 2) {
						response.map((item) => {
							// //console.info("item--" + JSON.stringify(item))
							if (item.spec2 == spec2 && item.spec1 == spec1) {
								//console.info("我进来了")
								selectProduct = item
							}
						})
						if (spec1 == "" && spec2 == "") {
                            tagTextList = "请选择： 规格，颜色"
                            selectProduct = ""
						} else if (spec1 != "" && spec2 != "") {
							tagTextList = "已选：" + spec1 + "，" + spec2
						} else if (spec1 != "") {
                            tagTextList = "请选择：颜色"
                            selectProduct = ""
						} else {
                            tagTextList = "请选择：规格"
                            selectProduct = ""
						}
					} else if (attributeList.length == 1) {
						if (spec1 == "") {
							response.map((item) => {
								if (item.spec2 == spec2) {
									selectProduct = item
								}
							})
							if (spec2 == "") {
                                tagTextList = "请选择：颜色"
                                selectProduct = ""
							} else {
								tagTextList = "已选：" + spec2
							}
						} else if (spec2 == "") {
							response.map((item) => {
								if (item.spec1 == spec1) {
									selectProduct = item
								}
							})
							if (spec1 == "") {
                                tagTextList = "请选择：规格"
                                selectProduct = ""
							} else {
								tagTextList = "已选：" + spec1
							}
						}
					}
				}
				console.info("selectProduct--" + JSON.stringify(selectProduct))
				let price = this.price
				let stock = this.stock
				let minLimit = this.minLimit
				let maxLimit = this.maxLimit
				let imageSrc = this.imageSrc
				let coupons = this.coupons
				let promotions = this.promotions
				if (selectProduct != "") {
					price = selectProduct.price
					stock = selectProduct.stock
					minLimit = selectProduct.minLimit
					imageSrc = this.thumbnail(selectProduct.thumbnail, 200, 200)
					coupons = selectProduct.coupons
					promotions = selectProduct.promotions
					if (selectProduct.maxLimit) {
						maxLimit = selectProduct.maxLimit
					}
				} else {
					price = this.pricePeriod
					stock = this.stockSum
					imageSrc = this.imageSrcOrl
				}
				this.currentNum = minLimit>0?minLimit:this.currentNum
				this.imageSrc = imageSrc
				this.selectProduct = selectProduct //被选中的商品
				this.attributeList = attributeList
				this.price = price //商品单价
				this.stock = stock //库存
				this.minLimit = minLimit //限购数量
				this.tagTextList = tagTextList //显示所选的标签列表
				this.coupons = coupons
				this.promotions = promotions
				this.maxLimit = maxLimit
			},

			//服务器数据整理
			formateResponse(res) {
                console.info("服务器数据整理res" + JSON.stringify(res))
                let _this = this
				let spec1List = []
				let spec2List = []
				let priceList = []
				let pricePeriod = this.pricePeriod
				let attributeList = []
				let stockSum = 0
				let spec1 = ""
				let spec2 = ""
				var imageSrcOrl = ""
				let productId = parseInt(this.productId)
				console.info("服务器数据整理productId--" + JSON.stringify(productId))
				let tagTextList = "请选择："
				if (res.length > 0) {
					res.map((item) => {
						if (item.spec1) {
							spec1List.push(item.spec1)
							if (productId == item.id) {
								spec1 = item.spec1
							}
						}
						if (item.spec2) {
							spec2List.push(item.spec2)
							if (productId == item.id) {
								spec2 = item.spec2
							}
						}
						priceList.push(item.price)
						stockSum += item.stock
						item
					})
					imageSrcOrl = _this.thumbnail(res[0].thumbnail, 200, 200)
				}

                //获取初始的价格区间
                priceList = Array.from(new Set(priceList))
                        if (priceList.length > 1){
                                pricePeriod = Math.min.apply(Math, priceList) + "-" + Math.max.apply(Math, priceList)
                        } else if (priceList.length > 0){
                                pricePeriod = priceList[0]
                        }


				//去重
				if (spec1List.length > 0) {
					spec1List = Array.from(new Set(spec1List));
					tagTextList += "规格"
					let attributeListItem = {}
					attributeListItem.attrname = "规格"
					attributeListItem.tagList = []
					spec1List.map((item) => {
						let num = 0
						if (res.length > 0) {
							res.map((item1) => {
								if (item1.spec1 == item) {
									num += item1.stock
								}
							})
						}
						let tagListItem = {}
						if (num == 0) {
							tagListItem.canSelected = false
						} else if (num > 0) {
							tagListItem.canSelected = true
						}
						if (spec1 == item) {
							tagListItem.isSelected = true
						} else {
							tagListItem.isSelected = false
						}
						tagListItem.haveImage = false
						tagListItem.tagname = item
						attributeListItem.tagList.push(tagListItem)
					})
					attributeList.push(attributeListItem)
				}
				if (spec2List.length > 0) {
					spec2List = Array.from(new Set(spec2List));
					tagTextList += " 颜色"
					let attributeListItem = {}
					attributeListItem.attrname = "颜色"
					attributeListItem.tagList = []
					spec2List.map((item) => {
						let num = 0
						if (res.length > 0) {
							res.map((item1) => {
								if (item1.spec2 == item) {
									num += item1.stock
								}
							})
						}
						let tagListItem = {}
						if (num == 0) {
							tagListItem.canSelected = false
						} else if (num > 0) {
							tagListItem.canSelected = true
						}
						if (spec2 == item) {
							tagListItem.isSelected = true
						} else {
							tagListItem.isSelected = false
						}
						tagListItem.haveImage = false
						tagListItem.tagname = item
						attributeListItem.tagList.push(tagListItem)
					})
					attributeList.push(attributeListItem)
				}
				console.info("attributeList-- " + JSON.stringify(attributeList))
				let tagControlList = []
				let origionalTagControlList = []
				if (attributeList.length > 0) {
					attributeList.map((item) => {
						if (item.tagList.length > 0) {
							item.tagList.map((item1) => {
								let tagControlListItem = {}
								tagControlListItem.attrname = item.attrname
								tagControlListItem.haveImage = item1.haveImage
								tagControlListItem.isSelected = item1.isSelected
								tagControlListItem.canSelected = item1.canSelected
								tagControlListItem.tagname = item1.tagname
								tagControlList.push(tagControlListItem)
								let origionalTagControlListItem = {}
								origionalTagControlListItem.attrname = item.attrname
								origionalTagControlListItem.haveImage = item1.haveImage
								origionalTagControlListItem.isSelected = item1.isSelected
								origionalTagControlListItem.canSelected = item1.canSelected
								origionalTagControlListItem.tagname = item1.tagname
								origionalTagControlList.push(origionalTagControlListItem)
							})
						}
					})

				}

				console.info("tagControlList-- " + JSON.stringify(tagControlList))
				this.origionalTagControlList = origionalTagControlList
				this.tagControlList = tagControlList
				this.attributeList = attributeList
				this.pricePeriod = pricePeriod
				this.price = pricePeriod
				this.stockSum = stockSum
				this.imageSrcOrl = imageSrcOrl
				this.imageSrc = imageSrcOrl
				this.stock = stockSum
				this.tagTextList = tagTextList //显示所选的标签列表
				if (!this.isNull(spec1)) {
					console.info("我是规格的初始化器spec1--" + spec1)
					this.control("规格", spec1, true, false)
				}
				if (!this.isNull(spec2)) {
					console.info("我是颜色的初始化器spec2--" + spec2)
					this.control("颜色", spec2, true, false)
				}
				if (this.isNull(spec1) && this.isNull(spec2)) {
					let response = this.response
					console.info("response" + JSON.stringify(response))
					if (response.length > 0) {
						response.map(item => {
							if (item.id == productId) {
								this.selectProduct = item
							}
						})
					}

				}
			},

			//数量减少事件
			numReduce(currentnum) {
				let selectProduct = this.selectProduct
				let currentNum = currentnum
                let minLimit = this.minLimit
                console.info("minLimit--" + minLimit)
                console.info("selectProduct--" + selectProduct)
                console.info(selectProduct)
				if (selectProduct) {
					let cartInfo = this.shopList
					if (currentNum <= minLimit || currentNum <= 1) {
						eeui.toast({
							message: "商品数量不能再少了呦！",
							//gravity: "middle"
						});

					} else {
						currentNum--
						//console.info("currentNum--" + currentNum)
						this.currentNum = currentNum
					}
				} else {
					eeui.toast({
						message: "请先选择商品规格或颜色呦！",
						//gravity: "middle"
					});
				}
			},

			//数量增加事件
			numAdd(currentnum) {
				let selectProduct = this.selectProduct
				let currentNum = currentnum
				let maxLimit = 0
				console.info("selectProduct.maxLimit--" + selectProduct.maxLimit)
				if (selectProduct.maxLimit) {
					maxLimit = selectProduct.maxLimit
				}
				console.info("maxLimit--" + maxLimit)
				let stock = selectProduct.stock
				console.info("selectProduct--" + JSON.stringify(selectProduct))
				if (selectProduct) {
					console.info("maxLimit--" + maxLimit)
					if (maxLimit > 0) {
						if (currentNum >= maxLimit) {
							eeui.toast({
								message: "商品数量已达上限呦！",
								//gravity: "middle"
							});

						} else {
							currentNum++
							this.currentNum = currentNum
						}
					} else if (currentNum >= stock) {
						eeui.toast({
							message: "商品数量已达上限呦！",
							//gravity: "middle"
						});
					} else {
						console.info("我进来了--" + maxLimit)
						currentNum++
						this.currentNum = currentNum
					}
					// }
				} else {
					eeui.toast({
						message: "请先选择商品规格或颜色呦！",
						//gravity: "middle"
					});
				}
			},

			handfocus(){
				this.$refs.input.blur()
			},

			//数量输入框的获焦事件
			bindfocus(e){
				this.inputFocusOff = true
				this.originalNum = e.currentTarget.attr.value
			},

			//数量输入框的失焦事件
			bindblur(e) {
				let _this = this
				console.info(e.currentTarget.attr.value)
				this.inputFocusOff = false
				let selectProduct = _this.selectProduct
                let originalNum = _this.originalNum
                let currentNum = e.currentTarget.attr.value;
                let minLimit = selectProduct == '' ? 0 : parseInt(selectProduct.minLimit)
                let maxLimit = selectProduct == '' ? 0 : parseInt(selectProduct.maxLimit)
                let stock = selectProduct == '' ? 0 : selectProduct.stock
                if (currentNum == "") {
                    _this.currentNum = originalNum
                }
                if (selectProduct) {
                    if (currentNum < minLimit || currentNum < 1) {
                            eeui.toast({
								message: "商品数量不能小于下限呦！",
								//gravity: "middle"
                            });
                            _this.currentNum = originalNum
                    }else if (maxLimit != 0) {
						if (currentNum > maxLimit) {
							eeui.toast({
								message: "商品数量超过上限呦！",
								//gravity: "middle"
							});

							_this.currentNum = originalNum
						}
					} else if (currentNum > stock) {
						eeui.toast({
							message: "商品数量超过上限呦！",
							//gravity: "middle"
						});
						_this.currentNum = originalNum
					} else {
						if (_this.stockSum > 0) {
							if (_this.isClose) {
								if (_this.type == "addCart") {
								//发送添加购物车的请求
								let data = {
                                    			productId : selectProduct.id,
								    			quantity : _this.currentNum,
                                    			uuid : _this.getGlobalData().uuid
                               				 }
                                console.info("加入购物车的请求data--" + JSON.stringify(data))
								add(data).then(
									res => {
										console.info("加入购物车的请求--" + JSON.stringify(res))
										if (res.type == 'success') {
											let info = {}
											info.productId = selectProduct.id
											info.currentNum = _this.currentNum
                                            info.spec = selectProduct.spec1 ? selectProduct.spec1 : '' + " " + selectProduct.spec2 ? selectProduct.spec2 : ''
                                            info.price = selectProduct.price
                                            console.info("加入购物车的请求info--" + JSON.stringify(info))
											_this.$emit("selectedInfo", info)
											_this.hideFrame()
											eeui.toast({
												message: "恭喜您，成功加入购物车",
											});

										}
									}
								).catch(error => {
									console.info(error)
									_this.hideFrame()
									eeui.toast({
										message: "服务器开小差了，请重新添加商品",
										//gravity: "middle"
									});

								})
							} else if (_this.type == "changeAttr") {
                                console.info("我要给父组件回传数据了")
								let info = {}
								info.productId = selectProduct.id
								info.currentNum = _this.currentNum
								info.productInfo = selectProduct
                                info.spec = selectProduct.spec1 ? selectProduct.spec1 : '' + " " + selectProduct.spec2 ? selectProduct.spec2 : '',
								_this.$emit("selectedInfo", info)
								_this.hideFrame()
							}
							} else {
								let data = {
                                		productId : selectProduct.id,
										quantity : _this.currentNum,
										uuid : _this.getGlobalData().uuid}
										buyNow(data).then(
											res => {
												console.info("立即购买的请求--" + JSON.stringify(res))
												if (res.type == 'success') {
													eeui.openPage({
														url: 'root://pages/goods/submit/index.js',
														statusBarType: 'immersion',
														statusBarStyle:false
													}, function (result) {});
													_this.hideFrame()
												}
											}
										).catch(error => {
											console.info(error)
											_this.hideFrame()
											eeui.toast({
												message: "服务器开小差了，请重新点击购买",
												//gravity: "middle"
											});

										})
							}
						}
					}
				} else {
					eeui.toast({
						message: "请先选择商品规格或颜色呦！",
						//gravity: "middle"
                    });
                    _this.currentNum = originalNum
				}
			},

			//检测用户的登陆状态
			checkLogin(callback) {

				if (this.getGlobalData().token == null) {
                    eeui.openPage({
                        url: 'root://pages/login/msgLogin.js',
                        statusBarType: 'immersion',
                        statusBarStyle:false},
                        (result) => {
                        }
                    );
				} else {
					if (callback) {
						callback()
					}
				}
			},

			//确定的提交事件
			submit() {
				let selectProduct = this.selectProduct
				let currentNum = this.currentNum
				console.info("提交事件的selectProduct--" + JSON.stringify(selectProduct))
				this.checkLogin(() => {
					if (selectProduct) {
                        console.info("this.stockSum--" + this.stockSum)
                        console.info("this.isClose--" +this.isClose)
						if (this.stockSum > 0) {
							if (this.isClose) {
								this.addCartSubmit()
							} else {
								this.buySubmit()
							}
						}
					} else {
						eeui.toast({
							message: "请先选择商品规格或颜色呦！",
							//gravity: "middle"
						});
					}
				})
			},

			//加入购物车的按键事件
			addCartSubmit() {
				let _this = this
				if(this.inputFocusOff){
					_this.isClose = true
					this.$refs.input.blur()
				}else{
					this.checkLogin(() => {
					console.info("加入购物车的按键事件")
					let selectProduct = this.selectProduct
					// console.info("productId--" + JSON.stringify(selectProduct))
					let currentNum = this.currentNum
					if (selectProduct) {
						//调用加入购物车的接口，成功后关闭弹窗
						if (this.stockSum > 0) {
                            console.info("type--" + JSON.stringify(this.type))

							if (this.type == "addCart") {
								//发送添加购物车的请求
								let data = {
                                    			productId : selectProduct.id,
								    	quantity : currentNum,
                                    			uuid : _this.getGlobalData().uuid
                               				 }
                                console.info("加入购物车的请求data--" + JSON.stringify(data))
								add(data).then(
									res => {
										console.info("加入购物车的请求--" + JSON.stringify(res))
										if (res.type == 'success') {
											let info = {}
											info.productId = selectProduct.id
											info.currentNum = currentNum
                                            info.spec = selectProduct.spec1 ? selectProduct.spec1 : '' + " " + selectProduct.spec2 ? selectProduct.spec2 : ''
                                            info.price = selectProduct.price
                                            console.info("加入购物车的请求info--" + JSON.stringify(info))
											_this.$emit("selectedInfo", info)
											_this.hideFrame()
											eeui.toast({
												message: "恭喜您，成功加入购物车",
											});

                      eeui.postMessage({
                        pageName: '',
                        key: 'updateShoppingCart',
                      });

										}
									}
								).catch(error => {
									console.info(error)
									_this.hideFrame()
									eeui.toast({
										message: "服务器开小差了，请重新添加商品",
										//gravity: "middle"
									});

								})
							} else if (this.type == "changeAttr") {
                                console.info("我要给父组件回传数据了")
								let info = {}
								info.productId = selectProduct.id
								info.currentNum = currentNum
								info.productInfo = selectProduct
                                info.spec = selectProduct.spec1 ? selectProduct.spec1 : '' + " " + selectProduct.spec2 ? selectProduct.spec2 : '',
								_this.$emit("selectedInfo", info)
								_this.hideFrame()
							}

						}
					} else {
						eeui.toast({
							message: "请先选择商品规格或颜色呦！",
							//gravity: "middle"
						});
					}
				})
				}
			},

			//立即购买的按键事件
			buySubmit() {
				let _this = this
				if(this.inputFocusOff){
					_this.isClose = false
					this.$refs.input.blur()
				}else{
					this.checkLogin(() => {
					//console.info("立即购买的按键事件")
					let selectProduct = this.selectProduct
					// console.info("selectProduct--" + JSON.stringify(selectProduct))
					let currentNum = this.currentNum
					if (selectProduct) {
						if (_this.stockSum > 0) {
							//关闭弹窗跳转到订单确认的页面
							//发送添加购物车的请求
							let data = {
                                		productId : selectProduct.id,
							quantity : currentNum,
							uuid : _this.getGlobalData().uuid}
							buyNow(data).then(
								res => {
									console.info("立即购买的请求--" + JSON.stringify(res))
									if (res.type == 'success') {
										eeui.openPage({
                                            url: 'root://pages/goods/submit/index.js',
                                            statusBarType: 'immersion',
                                            statusBarStyle:false
                                        }, function (result) {});
										_this.hideFrame()
									}
								}
							).catch(error => {
								console.info(error)
								_this.hideFrame()
								eeui.toast({
									message: "服务器开小差了，请重新点击购买",
									//gravity: "middle"
								});

							})
						}
					} else {
						eeui.toast({
							message: "请先选择商品规格或颜色呦！",
							//gravity: "middle"
						});

					}
				})
				}
			},
		}
	}
</script>

<style lang="css" src="@/style/wx.css" />
<style scoped>

/* .bottomFrame{
    border-style:solid;
    background-color: #A1A1A1;
        border-width:1px;
        border-color:#000;
        z-index: 200;
        position: fixed;
} */

.wrap {
        position: fixed;
        z-index: 200;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(248, 248, 248, 0.5);
}

.frame-wrapper {
        /*background-color: rgba(248, 248, 248, 0.5);*/
        background-color: rgba(0, 0, 0, 0.5);
        position: fixed;
        z-index: 201;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        /* border-top-left-radius: 20px;
        border-top-right-radius: 20px; */
}

.frame {
        background-color: #fff;
        position: absolute;
        bottom: 0px;
        width: 750px;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        z-index: 201;
}

.content{
        padding: 30px 0 0 30px;
        position: relative;
        min-height: 800px;
}

.bottomFrame-icon-close{
        width: 70px;
        height: 70px;
        position: absolute;
        right: 30px;
}

.bottomFrame-top{
    display: flex;
    flex-direction: row;
    border-bottom-style: solid;
     border-bottom-width:2px;
        border-bottom-color:rgba(211, 211, 211, 0.719);
}

.bottomFrame-top-image{
         width: 200px;
        height: 200px;
        margin-right: 20px;
        border-radius: 6px;
}

.bottomFrame-top-detail{
        width: 500px;
        padding: 10px;
}

.bottomFrame-top-inner{
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
}

.bottomFrame-top-price{
        color: #FF4000;
        font-weight: bold;
}

.bottomFrame-top-price-text{
        color: #FF4000;
        /*font-weight: bold;*/
        /*font-size: 40px;*/
	    font-size: 26px;
}

.bottomFrame-top-Inventory{
        font-size: 28px;
        color: #A1A1A1;
}

.bottomFrame-top-tag{
        border-radius: 10px;
        line-height: 36px;
        font-size: 24px;
        font-family: PingFang SC;
        font-weight: 400;
        max-width: 450px;
        max-height: 82px;
        text-overflow: ellipsis;
        lines: 2;
}

.bottomFrame-scroll{
}

.bottomFrame-attribute{
        margin-top: 30px;
        padding-right: 30px;
}

.bottomFrame-attribute-name{
        font-size: 30px;
}

.bottomFrame-attribute-item{
        flex-wrap: wrap;
        padding-bottom: 20px;
        /* border-bottom-style:solid;
        border-bottom-width:2px;
        border-bottom-color:rgba(211, 211, 211, 0.719); */
}

.bottomFrame-attribute-tag{
    display: flex;
    flex-direction: row;
    align-items: center;
        border-style:solid;
        border-width:1px;
        border-color:rgba(211, 211, 211, 0.719);
        margin-right: 20px;
        margin-top: 20px;
        padding: 10px;
        border-radius: 10px;
}

.attr-r{
        border-style:solid;
        border-width:1px;
        border-color:#FF4000;
        background-color: #FFF3F3;
}

.attr-text-r{
    color: #FF4000;
}

.attr-lose{
        opacity: 0.4;
        border-style:dotted;
        border-width:1px;
        border-color:rgb(143, 143, 143);
}

.bottomFrame-attribute-tag-image{
        width: 50px;
        height: 50px;
        border-radius: 8px;
        margin-right: 20px;
}

.bottomFrame-attribute-tag-text{
        lines:3;
        max-width: 660px;
        max-height: 108px;
        line-height: 36px;
        font-size: 28px;
        letter-spacing: 2px;
        text-overflow: ellipsis;
}

.bottomFrame-num-control{
        margin: 30px 30px 30px 0;
        justify-content: space-between;
        padding-bottom: 20px;
		border-bottom-style:solid;
        border-bottom-width:2px;
        border-bottom-color:rgba(211, 211, 211, 0.719);
}

.bottomFrame-num-control-text{
    font-size: 30px;
}

.bottomFrame-num-control-limit{
        color: #FF4000;
        font-size: 24px;

}

.shoppingCart-productList-control{
        display: flex;
        flex-direction: row;
        border-radius: 16px;
        align-items: center;
        border-style:solid;
        border-width:1px;
        border-color:rgba(151, 150, 150, 0.493);
}

.shoppingCart-productList-reduce{
        text-align: center;
        width: 60px;
        line-height: 60px;
        font-size: 24px;
}

.shoppingCart-productList-num{
        text-align: center;
        height: 60px;
        width: 100px;
        /* min-width: 100px; */
        /* max-width: 130px; */
        line-height: 60px;
        font-size: 30px;

}

.shoppingCart-productList-add{
        text-align: center;
        height: 60px;
        width: 60px;
        line-height: 60px;
        font-size: 24px;
}

.bottomFrame-bottom{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
}

.bottomFrame-button-only{
    display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        height:100px;
    width:675px;
    margin: 20px 0;
    border-radius: 20px;
}

.bottomFrame-button{
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width:300px;
        height:100px;
        margin: 20px 20px;
        border-radius: 20px;
}

.bottomFrame-button-text{
    font-size: 30px;
}

.nostockSum{
      background-image: linear-gradient(to top, rgb(187, 186, 186) , rgb(224, 224, 224));
      color: #888;
}

/* 以下是弹窗的动画效果 */
.wrapAnimate {
        /* animation: wrapAnimate 0.5s ease-in-out forwards; */
        transition-timing-function: ease-in-out;
        transition-duration: 0.5s;
        transition-property:  height;
}

@keyframes wrapAnimate {
        0% {
        }

        100% {
                background: rgba(0, 0, 0, 0.35);
        }
}

.wrapAnimateOut {
        animation: wrapAnimateOut 0.5s ease-in-out forwards;
}

@keyframes wrapAnimateOut {
        0% {
                background: rgba(0, 0, 0, 0.35);
        }

        100% {
                background: rgba(0, 0, 0, 0);
        }
}

.frameAnimate {
        /* animation: frameAnimate 0.5s ease forwards; */
        transition-timing-function: ease;
        transition-duration: 0.5s;
        transition-property:  height, background-color;
}

@keyframes frameAnimate {
        0% {
        }

        100% {
                opacity: 1;
                top: 0px;
        }
}

.frameAnimateOut {
        /* animation: frameAnimateOut 0.5s ease forwards; */
        transition-timing-function: ease;
        transition-duration: 0.5s;
        transition-property:  height, background-color;
}

@keyframes frameAnimateOut {
        0% {
                opacity: 1;
                top: 0px;
        }

        100% {
                opacity: 0;
                bottom: 0px;
        }
}


.column_product_price_newTitle {
  /*font-size: 36px;*/
  /*font-size: 28px;*/
  font-weight: bold;
  color: rgba(231, 91, 83, 1);
  margin-right: 10px;
}

.activity_four {
  border-radius: 60px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  margin-right: 10px;
  overflow: hidden;
}
.activety_left {
  background-color: rgba(94, 74, 74, 1);
  padding:4px 12px;
}
.activity_left_title {
  font-size: 24px;
  color: rgba(247, 219, 194, 1);
  line-height: 34px;
  height: 32px;
  display: block;
}
.activity_right {
  padding: 4px 12px;
  background-color: rgba(247, 219, 194, 1);
}
.activity_right_title {
  font-size: 24px;
  font-weight: bold;
  color: rgba(94, 74, 74, 1);
  line-height: 34px;
  height: 32px;
  display: block;
}


</style>

